<template>
  <div>
    <div class="items-wrapper">
      <van-cell-group>
        <van-cell title="头像" @click="chooseAvatar" isLink>
          <img class="van-cell__value--avatar" :src="userInfo.avatar" alt="" />
        </van-cell>
        <van-cell title="名字" @click="showEdit(0)" :value="userInfo.nickname" isLink/>
        <van-cell v-if="userInfo.user_type == 2" title="服务价格" @click="showEdit(1)" :value="userInfo.price" isLink/>
        <van-cell v-if="userInfo.user_type == 2" title="头衔" :value="userInfo.title" isLink/>
        <van-cell v-if="userInfo.user_type == 2" title="我的等级" isLink>
          <span class="van-cell__value--badge">{{ userInfo.level.name }}</span>
        </van-cell>
      </van-cell-group>
    </div>
    <edit-popup :value="editValue" :show-popup="showEditPopup" @confirm="confirmEdit" @cancel="cancelEdit" :placeholder="editPlaceholder" :type="editType"></edit-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import util from '@/util/util'
import EditPopup from '@/components/editPopup'

Vue.component(EditPopup.name, EditPopup)

import { mapGetters } from 'vuex'

export default {
  name: 'Info',
  data () {
    return {
      showEditPopup: false,
      editValue: '',
      editPlaceholder: '',
      editIndex: -1,
      editType: 'text'
    }
  },
  beforeCreate () {
    var webUrl = window.location.href
    var jsApiList = [
      "chooseImage",
      "previewImage",
      "uploadImage"
    ]
    if (util.isAndroid()) {
      var that = this
      setTimeout(function() {
        that.SDKRegister(that, webUrl, jsApiList)
      }, 500)
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    /*
     * 选择新头像
     */
    chooseAvatar() {
      var that = this
      // 上传恐怕需要用jssdk来做
      this.wx.chooseImage({
        count: 1,
        success: function (res) {
          var localId = res.localIds[0]
          that.wx.uploadImage({
            localId: localId,
            success: function(res) {
              var image = { localId: localId, serverId: res.serverId }
              that.updateUserInfo(2, res.serverId)
            }
          })
        }
      })
    },
    showEdit(index) {
      if (index == 0) {
        this.editValue = this.userInfo.nickname
        this.editType = 'text'
        this.editPlaceholder = '填写您的姓名'
      } else if (index == 1) {
        this.editValue = this.userInfo.price
        this.editType = 'number'
        this.editPlaceholder = '填写您的服务价格'
      }
      this.showEditPopup = true
      this.editIndex = index
    },
    confirmEdit(value) {
      this.showEditPopup = false
      if (this.editIndex == 1 && value <= 0) {
        return this.$toast.fail('服务价格错误')
      }
      this.updateUserInfo(this.editIndex, value)
      this.editValue = value
    },
    updateUserInfo(type, value) {
      var params= {}
      if (type == 0) {
        // 修改名字
        params.nickname = value
      } else if(type == 1) {
        params.price = value
        params.nickname = this.userInfo.nickname
      } else if(type == 2) {
        params.avatar_media_id = value
        params.nickname = this.userInfo.nickname
      }
      this.$toast.loading()
      var that = this
      var url = '/users/' + this.userInfo.id + '/'
      // 调用登陆接口
      this.axios.put(url, qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (type == 0) {
          that.$toast.success('修改用户名称成功')
        } else if(type == 1) {
          that.$toast.success('修改服务价格成功')
        } else if(type == 2) {
          that.$toast.success('修改用户头像成功')
        }
        // 更新store信息
        var payload = { userInfo: res.data}
        that.$store.dispatch('updateUser', payload)
      })
      .catch(function (error) {
        that.$toast.clear()
        if (error.response) {
          that.$toast.fail(error.response.data.detail)
        } else {
          that.$toast.fail('请求出错')
        }
      })
    },
    cancelEdit() {
      this.showEditPopup = false
      this.editIndex = -1
    },
  }
}

</script>
